/**
 * 销售漏斗分析组件
 */
import React from 'react';
import { AlertCircle, TrendingDown } from 'lucide-react';

interface FunnelStep {
  name: string;
  count: number;
  conversionRate: number;
  lossRate: number;
  suggestion?: string;
}

interface SalesFunnelProps {
  data: FunnelStep[];
}

const SalesFunnel: React.FC<SalesFunnelProps> = ({ data }) => {
  const maxCount = Math.max(...data.map((step) => step.count));

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
      <div className="mb-6">
        <h3 className="text-lg font-bold text-gray-800 mb-1">销售漏斗分析</h3>
        <p className="text-xs text-gray-500">全链路转化率分析</p>
      </div>

      <div className="space-y-6">
        {data.map((step, index) => {
          const widthPercent = (step.count / maxCount) * 100;
          const isLast = index === data.length - 1;

          return (
            <div key={index} className="relative">
              {/* 漏斗步骤 */}
              <div className="flex items-center gap-4">
                <div className="w-24 text-sm font-medium text-gray-700">{step.name}</div>
                <div className="flex-1 relative">
                  <div
                    className="h-12 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-lg flex items-center justify-between px-4 text-white font-semibold transition-all duration-500"
                    style={{ width: `${widthPercent}%` }}
                  >
                    <span>{step.count.toLocaleString()}</span>
                    <span className="text-xs">{step.conversionRate}%</span>
                  </div>
                </div>
              </div>

              {/* 流失率和建议 */}
              {!isLast && (
                <div className="ml-28 mt-2 flex items-center gap-4">
                  <div className="flex items-center gap-2 text-sm">
                    <TrendingDown size={16} className="text-red-500" />
                    <span className="text-red-600 font-medium">流失率: {step.lossRate}%</span>
                  </div>
                  {step.suggestion && (
                    <div className="flex items-center gap-2 text-xs text-orange-600 bg-orange-50 px-3 py-1 rounded-lg">
                      <AlertCircle size={14} />
                      <span>{step.suggestion}</span>
                    </div>
                  )}
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* 总体转化率 */}
      <div className="mt-6 pt-6 border-t border-gray-100">
        <div className="grid grid-cols-3 gap-4">
          <div className="text-center p-4 bg-blue-50 rounded-xl">
            <div className="text-xs text-gray-600 mb-1">总转化率</div>
            <div className="text-2xl font-bold text-blue-600">
              {((data[data.length - 1].count / data[0].count) * 100).toFixed(2)}%
            </div>
          </div>
          <div className="text-center p-4 bg-green-50 rounded-xl">
            <div className="text-xs text-gray-600 mb-1">总访客数</div>
            <div className="text-2xl font-bold text-green-600">{data[0].count.toLocaleString()}</div>
          </div>
          <div className="text-center p-4 bg-purple-50 rounded-xl">
            <div className="text-xs text-gray-600 mb-1">总成交数</div>
            <div className="text-2xl font-bold text-purple-600">
              {data[data.length - 1].count.toLocaleString()}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SalesFunnel;


